<template>
  <div>
      <h1 ref="mya">{{a}}</h1>  
     <button @click="change">改变</button>
     <hr>
     <cateOne :msg="mymsg" :age="age" :list="list"
     @sendId="getId" @sendName="getName">

     </cateOne>
     
       <cateTwo></cateTwo>
  </div>
</template>
<script setup>
     import {ref,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,
      onErrorCaptured,onRenderTriggered,nextTick
     } from 'vue'

    //  vue3 语法糖写法 引入子组件
    import cateOne from './cateOne.vue'
   import cateTwo from './cateTwo.vue'

    // 准备三个父传子的数据
    let mymsg=ref("你好啊")
    let age=ref(18)
    let list=ref(["李连杰","甄子丹","吴京"])

    onMounted(()=>{
      console.log("组件挂载后")
    })

    // 可以获取更新后的dom,由于vue是异步更新dom，所以需要使用nextTick
    // 如果想在setup操作dom 可以使用nextTick
    // 初始化一些插件  
    let mya=ref(null); //获取了h1的dom
    
    nextTick(()=>{
     console.log(mya.value,"---------------")
   })


    let a=ref(1);
    let change=()=>{
      a.value++
      // VUE3 数据改变可以获取最新的dom
       console.log(mya.value.innerHTML,"^^^^^^^^^^^^^^^^^^")
   
    }
    
    // 接收子组件传来的数据
    let getId=(id)=>{
      console.log(id,"--------子组件触发的sendid事件 传来的id内容")
    }
    let getName=(name)=>{
      console.log(name,"--------子组件触发的sendName事件 传来的name内容")
    }

    // 数据改变，引起dom改变，才会触发组件更新前，后
   onBeforeUpdate(()=>{
      console.log("组件更前")
    })
    onUpdated(()=>{
         console.log("组件更后")
    })
     onBeforeUnmount(()=>{
      console.log("组件卸载前")
     })
    onUnmounted(()=>{
      console.log("组件卸载后")
    })
    // 注册一个钩子，在捕获了后代组件传递的错误时调用。
    onErrorCaptured((err)=>{
      console.log(err,'捕捉到的错误')
    })
    // 注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。
    onRenderTriggered(()=>{
      console.log('组件渲染触发')
    })
</script>